<template>
  <div class="page-common-layout">
    <div class="page-common-content">
      <tool-bar
        @search="$refs.table.refresh(true)"
        @reset="
          () => {
            (this.queryParam = {}), $refs.table.refresh(true);
            this.startTime = '';
          }
        "
      >
        <template slot="toolForm">
          <a-form-item :label="$ct('originatingTime', '发起时间')">
            <a-range-picker
              style="width: 280px"
              :ranges="{
                今天: [moment(), moment()],
                最近一周: [moment().add(-1, 'W'), moment()],
                最近一个月: [moment().add(-1, 'M'), moment()],
                最近三个月: [moment().add(-3, 'M'), moment()],
              }"
              :placeholder="[
                $ct('StartTime', '开始时间'),
                $ct('EndTime', '结束时间'),
              ]"
              @change="startTimeOnChange"
              v-model="startTime"
            />
          </a-form-item>
          <a-form-item :label="$ct('workflowBelongingTo', '所属流程')">
            <a-input
              v-model="queryParam.modelName"
              :placeholder="$ct('workflowBelongingTo', '所属流程')"
              style="width: 100%"
            />
          </a-form-item>
        </template>
      </tool-bar>
      <DataGrid
        ref="table"
        :columns="columns"
        :url="url"
        rowKey="taskId"
        showPagination="auto"
        :queryParam="queryParam"
        :showRowSelect="false"
      >
        <span slot="renderFlowStatus" slot-scope="{ text, record, index }">
          <a-tag :color="'green'">
            等待审核
          </a-tag>
        </span>
        <span slot="renderProcessProgress" slot-scope="{ text, record }">
          <a-progress :percent="30" />
        </span>

        <span slot="renderAction" slot-scope="{ text, record }">
          <template>
            <a @click="handleTransaction(record)" v-action:inProgress_detail>
              {{ $ct("detail", "详情") }}
            </a>
            <span class="action-margin"></span>
            <a @click="handleRevocation(record)" v-action:inProgress_revoke>{{
              $ct("revoke", "撤销")
            }}</a>
            <span class="action-margin"></span>
          </template>
          <a-dropdown v-action:inProgress_urging>
            <a class="ant-dropdown-link">
              {{ $ct("more", "更多") }} <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handlePress(record)">{{ $ct("urge", "催办") }}</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </DataGrid>
      <!-- 流程图 -->
      <flow-chat ref="flowChatForm" />
      <!-- 流程详情 -->
      <task-form
        ref="taskModal"
        :visible="taskVisible"
        :loading="confirmLoading"
        @cancel="taskHandleCancel()"
        @ok="taskHandleOk"
      />
      <!-- 流程催办 -->
      <press-modal
        ref="pressModel"
        :model="pressModel"
        :loading="confirmLoadingPress"
        :visible="pressVisible"
        @cancel="handleCancelPress()"
        @ok="handleOkPress"
      />
      <!-- 流程撤销 -->
      <revocation-modal
        ref="revocationModel"
        :revocationTitile="revocationTitile"
        :model="revocationModel"
        :loading="confirmLoadingRevocation"
        :visible="revocationVisible"
        @cancel="handleCancelRevocation()"
        @ok="handleOkRevocation"
      />
    </div>
  </div>
</template>
<script>
import { dataGridMixin } from "@/mixins/dataGridMixin";
import { DataGrid } from "@/components";
import taskForm from "../myMission/taskView.vue";
import flowChat from "../myMission/flowChat.vue";
import pressModal from "./press.vue";
import revocationModal from "./revocation.vue";
import moment from "moment";

export default {
  name: "TableList",
  mixins: [dataGridMixin],
  components: {
    DataGrid,
    taskForm,
    flowChat,
    pressModal,
    revocationModal,
  },
  data() {
    return {
      columns: [
        {
          title: "流程标题",
          dataIndex: "formName",
          width: 200,
          langCode: "workflowTitle",
        },
        {
          title: "所属流程",
          dataIndex: "modelName",
          langCode: "workflowBelongingTo",
        },
        {
          title: "审核环节",
          dataIndex: "taskName",
          langCode: "auditPhase",
        },
        {
          title: "发起时间",
          dataIndex: "flowStartTime",
          sorter: false,
          width: 200,
          langCode: "originatingTime",
        },
        {
          title: "流程状态",
          dataIndex: "flowStatus",
          align: "center",
          langCode: "ProcessStatus",
          scopedSlots: {
            customRender: "renderFlowStatus",
          },
        },
        // {
        //   title: "流程进度",
        //   dataIndex: "processProgress",
        //   align: "center",
        //   langCode: "workflowProgress",
        //   scopedSlots: {
        //     customRender: "renderProcessProgress",
        //   },
        // },
        {
          title: "操作",
          dataIndex: "action",
          width: 150,
          align: "center",
          scopedSlots: {
            customRender: "renderAction",
          },
        },
      ],
      visible: false,
      confirmLoading: false,
      mdl: null,
      queryParam: {},
      taskVisible: false,
      // 催办
      pressVisible: false,
      pressModel: null,
      confirmLoadingPress: false,
      // 撤销
      revocationModel: null,
      confirmLoadingRevocation: false,
      revocationVisible: false,
      url: {
        getPageSet: "/workflow/apiFlowableTask/getMyNoEndProcessPageSetData",
      },
      startTime: [],
      revocationTitile: "",
    };
  },
  methods: {
    moment,
    // 流程图
    flowChart(record) {
      this.$post("/workflow/apiFlowableProcessInstance/clickStartProcess", {
        modelKey: record.modelKey,
        taskId: record.taskId,
        processInstanceId: record.processInstanceId,
        nodeId: record.nodeId,
      }).then((res) => {
        const jsonData = res;
        this.$refs.flowChatForm.loadData(jsonData);
      });
    },
    // 详情
    handleTransaction(e) {
      this.confirmLoading = true;
      const jsonData = "";
      this.$post("/workflow/apiFlowableProcessInstance/clickStartProcess", {
        modelKey: e.modelKey,
        taskId: e.taskId,
        processInstanceId: e.processInstanceId,
        nodeId: e.nodeId,
        processDefinitionId: e.processDefinitionId,
      }).then((res) => {
        if (res.statusCode != 300) {
          const jsonData = res;
          this.$refs.taskModal.loadData(e, jsonData);
          this.confirmLoading = false;
          this.taskVisible = true;
        } else {
          this.$message.error(res.message);
          this.confirmLoading = false;
        }
      });
    },
    taskHandleOk() {
      this.taskVisible = false;
    },
    taskHandleCancel() {
      this.taskVisible = false;
    },
    // 催办
    handlePress(e) {
      const form = this.$refs.pressModel.form;
      form.resetFields(["type", "content"]); // 清理表单数据（可不做）
      this.pressVisible = true;
      this.pressModel = e;
    },
    // 确认催办
    handleOkPress() {
      const form = this.$refs.pressModel.form;
      form.validateFields((errors, values) => {
        if (!errors) {
          this.confirmLoadingPress = true;
          values.type = values.type.join(",");
          this.$post("/workflow/apiFlowableTask/processUrging", values)
            .then((res) => {
              if (res.statusCode === 200) {
                this.pressVisible = false;
                this.$message.success(res.message);
              } else {
                this.$message.error(res.message);
              }
            })
            .finally(() => {
              this.confirmLoadingPress = false;
            });
        }
      });
    },
    handleCancelPress() {
      this.pressVisible = false;
    },
    // 撤销
    handleRevocation(e) {
      const form = this.$refs.revocationModel.form;
      form.resetFields(["message"]); // 清理表单数据（可不做）
      this.revocationVisible = true;
      this.revocationTitile = "【" + e.formName + "】- 流程撤销";
      this.revocationModel = e;
    },
    handleCancelRevocation() {
      this.revocationVisible = false;
    },
    handleOkRevocation() {
      const form = this.$refs.revocationModel.form;
      form.validateFields((errors, values) => {
        if (!errors) {
          this.confirmLoadingRevocation = true;
          this.$post("/workflow/apiFlowableTask/processRevocation", values)
            .then((res) => {
              if (res.statusCode === 200) {
                this.revocationVisible = false;
                this.$message.success(res.message);
                this.$refs.table.refresh();
              } else {
                this.$message.error(res.message);
              }
            })
            .finally(() => {
              this.confirmLoadingRevocation = false;
            });
        }
      });
    },
    startTimeOnChange(date, dateString) {
      this.queryParam.startTime = dateString.toString();
    },
  },
};
</script>

<style lang="less"></style>
